<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Le styles -->
    <link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <style>
      body {
        padding-top: 60px;
      }
      @media (max-width: 979px) {

        /* Remove any padding from the body */
        body {
          padding-top: 0;
        }
      }
    </style>
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
    <!-- Le javascript
    ================================================== -->
    <script data-require="jquery" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script data-require="bootstrap" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="http://albatrossdigital.github.io/ckeditor-sandbox/ckeditor.js"></script>
  </head>

  <body>
    <div class="container">
      <h1>CKEditor Bootstrap Widgets</h1>
      <p>
        Give your content authors the ability to add responsive layout elements to their pages.  CKEditor widgets are provided for common
        <a href="http://getbootstrap.com/">Bootstrap</a> layouts:
      </p>
      <ul>
        <li>Left sidebar image</li>
        <li>Right sidebar image</li>
        <li>Two columns</li>
        <li>Three columns</li>
        <li>Alert box</li>
      </ul>
      <p>Each widget can have its own button, or you can use the Widget Template Menu plugin to create a dropdown menu of templates.</p>
      <p><strong>Watch a demo: <a href="http://albatrossdigital.com/node/41">http://albatrossdigital.com/node/41</a></strong></p>

      <h2>Using</h2>
      <p>Install the plugin using the standard <a href="http://docs.ckeditor.com/#!/guide/dev_plugins" target="_blank">CKEditor plugin installation instructions</a>.
      We recommend manually building your editor on ckeditor.com, or using <a href="https://github.com/albatrossdigital/ckeditor-sandbox" target="_blank">our base editor build</a>, which will include everything you need.</p>
      <!--<pre>&lt;script src="http://albatrossdigital.github.io/ckeditor-sandbox/ckeditor.js"&gt;&lt;/script&gt;</pre>-->
      <p>Once you have added the plugin, you can use our Widget Template Menu plugin or the standard Toolbar Groups.  For each, you must set extraPlugins and allowedContent.</p>
      <ul>
        <li><a href="#widgetTemplateMenu">Widget Template Menu</a></li>
        <li><a href="#toolbarGroups">Toolbar Groups</a></li>
        <!--<li><a href="#customToolbar">Custom Toolbar</a></li>-->
      </ul>

      <br/><a name="widgetTemplateMenu"></a><h3>Widget Template Menu</h3>

      <pre>
        CKEDITOR.replace( 'editor1', {
          plugins: 'wysiwygarea,toolbar,basicstyles,menubutton,link,sourcearea,image2,widget',
          extraPlugins: 'widgetbootstrap,widgettemplatemenu',
          height: 400,
          toolbar: [
            [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
            [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
            [ 'Bold' ],
            [ 'WidgetTemplateMenu' ]
          ],
          allowedContent: 'p a div span h2 h3 h4 h5 h6 section article iframe object embed strong b i em cite pre blockquote small,' +
            'sub sup code ul ol li dl dt dd table thead tbody th tr td img caption mediawrapper br[href,src,target,width,height,colspan,' +
            'span,alt,name,title,class,id,data-options]{text-align,float,margin}(*);'
        } );
      </pre>

      <textarea id="editor1" cols="10" rows="10">
        <div class="row two-col-right"><div class="col-md-9 col-main"><p>Content</p></div><div class="col-md-3 col-sidebar"><p><img alt="" src="http://placehold.it/300x250&amp;text=Image" /></p></div></div>
        <p>&nbsp;</p>
      </textarea>

      <script>

        CKEDITOR.replace( 'editor1', {
          plugins: 'wysiwygarea,toolbar,basicstyles,menubutton,link,sourcearea,image2,widget',
          extraPlugins: 'widgetbootstrap,widgettemplatemenu',
          height: 400,
          toolbar: [
            [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
            [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
            [ 'Bold' ],
            [ 'WidgetTemplateMenu' ]
          ],
          allowedContent: 'p a div span h2 h3 h4 h5 h6 section article iframe object embed strong b i em cite pre blockquote small,' +
            'sub sup code ul ol li dl dt dd table thead tbody th tr td img caption mediawrapper br[href,src,target,width,height,colspan,' +
            'span,alt,name,title,class,id,data-options]{text-align,float,margin}(*);'
        } );

      </script>


      <br/><a name="toolbarGroups"></a><h3>Toolbar Groups</h3>
      <pre>
        CKEDITOR.replace( 'editor2', {
          plugins: 'wysiwygarea,toolbar,basicstyles,menubutton,link,sourcearea',
          extraPlugins: 'image2,widget,widgetbootstrap',
          height: 400,
          toolbarGroups : [
            { name: 'clipboard',   groups: [ 'clipboard', 'undo', 'source' ] },
            { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
            { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
            { name: 'links' },
            { name: 'insert' },
            { name: 'about' }
          ],
          allowedContent: 'p a div span h2 h3 h4 h5 h6 section article iframe object embed strong b i em cite pre blockquote small,' +
            'sub sup code ul ol li dl dt dd table thead tbody th tr td img caption mediawrapper br[href,src,target,width,height,colspan,' +
            'span,alt,name,title,class,id,data-options]{text-align,float,margin}(*);'
        } );
      </pre>

      <textarea id="editor2" cols="10" rows="10">
        <div class="row two-col-right"><div class="col-md-9 col-main"><p>Content</p></div><div class="col-md-3 col-sidebar"><p><img alt="" src="http://placehold.it/300x250&amp;text=Image" /></p></div></div>
        <p>&nbsp;</p>
      </textarea>

      <script>

        CKEDITOR.replace( 'editor2', {
          plugins: 'wysiwygarea,toolbar,basicstyles,menubutton,link,sourcearea',
          extraPlugins: 'image2,widget,widgetbootstrap',
          height: 400,
          toolbarGroups : [
              // On the basic preset, clipboard and undo is handled by keyboard.
              // Uncomment the following line to enable them on the toolbar as well.
              { name: 'clipboard',   groups: [ 'clipboard', 'undo', 'source' ] },
              { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
              { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
              { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
              { name: 'links' },
              { name: 'insert' },
              { name: 'about' }
          ],
          allowedContent: 'p a div span h2 h3 h4 h5 h6 section article iframe object embed strong b i em cite pre blockquote small,' +
            'sub sup code ul ol li dl dt dd table thead tbody th tr td img caption mediawrapper br[href,src,target,width,height,colspan,' +
            'span,alt,name,title,class,id,data-options]{text-align,float,margin}(*);'
        } );

      </script>

      <br/><br/><h2>About the Creators</h2>
      <div class="row two-col-left">
        <div class="col-md-2 col-sidebar">
          <p><a href="http://albatrossdigital.com" title="Albatross Digital" target="_blank"><img alt="Albatross Digital" src="http://albatrossdigital.com/images/logo.png" /></a></p>
        </div>

        <div class="col-md-10 col-main">
          <p><a href="http://albatrossdigital.com" target="_blank">Albatross Digital</a> is a small group that builds websites, designs identities and solve problems.
          We have spent a lot of time and resources thinking about better content authoring experiences and workflows.  If you're interested in learning
          more, <a href="http://albatrossdigital.com/projects">have a look at our work</a> or send us a note at <a href="mailto:hello@albatrossdigital.com">hello@albatrossdigital.com</a>.
        </div>
      </div>
    </div>

  </body>

</html>
